<template>
	<view class="detalindex">
		<!-- 轮播图 -->
		<swiper class="swiperContainer" :indicator-dots="true" indicator-color="#00000040" indicator-active-color="#7d00ff" :autoplay="true" :circular="true" :interval="2000">
			<swiper-item v-for="(item, index) in goodsDetal.pics" :key="index" style="width: 100%; height: 100%">
				<image @click="previewImg(index)" :src="item.pics_big_url" style="width: 100%; height: 100%"></image>
			</swiper-item>
		</swiper>
		<!-- 价格分享收藏按钮 -->
		<view class="priceFn">
			<view class="dollarColor">
				￥
				<text class="price">{{ goodsDetal.goods_price }}</text>
			</view>
			<view class="butFn">
				<button type="default" size="mini" class="share" open-type="share"><text style="font-size: 50rpx" class="iconfont icon-zhuanfa"></text></button>
				<!-- 没有收藏的时候 -->
				<button type="default" size="mini" open-type="getUserInfo" class="getUserInfo" @click="addStare">
					<text style="font-size: 50rpx" :class="['iconfont', { 'icon-shoucang1': !isStare, 'icon-shoucang': isStare, stareD: isStare }]"></text>
				</button>
				<!-- 有收藏的时候显示 -->
				<!--        <button
          type="default"
          size="mini"
          open-type="getUserInfo"
          class="getUserInfo"
          @click="removeStare"
          v-show="isStare"
        >
          <text
            style="font-size: 50rpx; color: #ffd103"
            class="iconfont icon-shoucang"
          ></text>
        </button> -->
			</view>
		</view>
		<!-- 商品名字 -->
		<text class="goodsNmae">{{ goodsDetal.goods_name }}</text>
		<!-- 图文详情 -->
		<!-- 分割 -->
		<view style="background-color: #f9f9f9; height: 20rpx"></view>
		<view class="goodsText">图文详情</view>
		<view v-html="goodsDetal.goods_introduce" class="goodsIntroduce"></view>
		<!-- 底部功能按钮 -->
		<view class="footFn" :class="{ heig: isshow }">
			<!-- 联系客服 -->
			<button type="default" open-type="contact" class="btn-contact" :plain="true" style="border: none">
				<i class="iconfont icon-kefu"></i>
				<text>联系客服</text>
			</button>
			<!-- 购物车 -->
			<button type="default" :plain="true" class="btn-car" style="border: none" @click="toShopCar">
				<i class="iconfont icon-gouwuche"></i>
				<text>购物车</text>
			</button>
			<!-- 加入购物车 -->
			<view class="addCar" @click="addGoodsDetal">加入购物车</view>
			<!-- 立即购买 -->
			<view class="newBuy" @click="newBuy">立即购买</view>
		</view>
	</view>
</template>

<script>
import { get } from '@/uilts/http.js';
export default {
	data() {
		return {
			goods_id: '',
			goodsDetal: {},
			isStare: '',
			isshow: false
		};
	},
	async onLoad(params) {
		// console.log(params);
		this.goods_id = params.goods_id;
		this.getGoodsDetail();
		this.getStareData();
		// 获取系统信息,直接判断是不是iphonx ,是的话加一个底部外边距
		let [err, res] = await uni.getSystemInfo({});
		console.log(res.model);
		if (res.model.indexOf('iPhone X') > -1) {
			this.isshow = true;
		}
	},
	onShow() {},
	methods: {
		// 点击收藏按钮
		// async handlerstare() {
		//   let favList = [];
		//   let { err, res } = await uin.setStorage({
		//     key: "product",
		//     data: favList,
		//   });
		//   console.log(err, res);
		// },
		// 点击预览图片
		previewImg(index) {
			let url = this.goodsDetal.pics.map(item => {
				return item.pics_big_url;
			});
			// console.log(url)
			uni.previewImage({
				current: index,
				urls: url
			});
		},
		// newBuy 点击立刻购买
		// 增加需求,加入购物车需要默认选中
		async newBuy() {
			let goodsList = [];
			// 先获取本地存储
			let [err, res] = await uni.getStorage({
				key: 'goodsDetal'
			});
			if (res.data) {
				// 之前就已经有存储的数据
				let storageIndex = res.data.findIndex(item => {
					return item.goods_id === this.goodsDetal.goods_id;
				});
				if (storageIndex < 0) {
					// 没有这个商品,我们可以直接把这个商品加进去
					this.goodsDetal.checked = true;
					goodsList.push(this.goodsDetal, ...res.data);
				} else {
					// 有这个商品,利用下标找到这个商品
					res.data[storageIndex].time++;
					res.data[storageIndex].checked = true;
					goodsList = res.data;
				}
			} else {
				// 之前没有存储的数据
				this.goodsDetal.checked = true;
				goodsList.push(this.goodsDetal);
			}
			uni.showToast({
				icon: 'none',
				title: '成功加入购物车'
			});
			// 最后把数据存入

			return uni
				.setStorage({
					key: 'goodsDetal',
					data: goodsList
				})
				.then(() => {
					uni.switchTab({
						url: '/pages/cart/index'
					});
				});
			;
		},
		// 封装获取收藏的本地存储,设置遍历
		getStareData() {
			uni.getStorage({
				key: 'goodsStare',
				success: res => {
					console.log(res);
					res.data.forEach(item => {
						console.log(res);
						if (item === this.goodsDetal.goods_id) {
							// 有收藏,显示
							this.isStare = true;
						} else {
							//没有收藏,
							this.isStare = false;
						}
					});
				},
				fail: () => {
					// 没有收藏
					this.isStare = false;
				}
			});
		},
		// 封装商品详情信息
		async getGoodsDetail() {
			let res = await get('/goods/detail', { goods_id: this.goods_id });
			console.log(res.data);
			if (res.data.meta.status === 200) {
				this.goodsDetal = res.data.message;
				// 开始存储的时候都是一,不存什么都没有
				this.goodsDetal.time = 1;
				this.goodsDetal.checked = false;
			}
		},
		toShopCar() {
			// 调转到tabBar中的页面
			uni.switchTab({
				url: '/pages/cart/index'
			});
		},
		// 点击收藏,切换字体图标,把商品id 存到本地存储 再次点击会把取消收藏
		async addStare() {
			let favList = [];
			let [error, res] = await uni.getStorage({
				key: 'goodsStare'
			});
			if (res.data) {
				// 本地存储有数据了
				// 还要判断有无重复的id,有的话删除
				let index = res.data.findIndex(item => {
					return item === this.goodsDetal.goods_id;
				});
				if (index !== -1) {
					// 这个就是代表有相同的id,要取消收藏
					res.data.splice(index, 1);
					// console.log(res.data)
					favList.push(...res.data);
					uni.showToast({
						icon: 'none',
						title: '取消收藏'
					});
				} else {
					// 没有相同的id
					favList.push(this.goodsDetal.goods_id, ...res.data);
					uni.showToast({
						icon: 'none',
						title: '收藏成功'
					});
				}
			} else {
				favList.push(this.goodsDetal.goods_id);
				uni.showToast({
					icon: 'none',
					title: '收藏成功'
				});
			}
			await uni.setStorage({
				key: 'goodsStare',
				data: favList
			});
			this.isStare = !this.isStare;
		},
		
		// 还有把商品数据传到本地存储中
		async addGoodsDetal() {
			let goodsList = [];
			// 先获取本地存储
			let [err, res] = await uni.getStorage({
				key: 'goodsDetal'
			});
			if (res.data) {
				// 之前就已经有存储的数据
				let storageIndex = res.data.findIndex(item => {
					return item.goods_id === this.goodsDetal.goods_id;
				});
				if (storageIndex < 0) {
					// 没有这个商品,我们可以直接把这个商品加进去
					goodsList.push(this.goodsDetal, ...res.data);
				} else {
					// 有这个商品,利用下标找到这个商品
					res.data[storageIndex].time++;
					goodsList = res.data;
				}
			} else {
				// 之前没有存储的数据
				console.log("第一存到购物车里面")
				goodsList.push(this.goodsDetal);
			}
			uni.showToast({
				icon: 'none',
				title: '成功加入购物车'
			});
			// 最后把数据存入
			return uni.setStorage({
				key: 'goodsDetal',
				data: goodsList
			});

		
		}
	}
};
</script>

<style lang="less">
.detalindex {
	padding-bottom: 94rpx;
	.heig {
		height: 135rpx;
	}
}
.swiperContainer {
	width: 497rpx;
	height: 497rpx;
	margin: 0 auto;
}
.priceFn {
	padding: 20rpx 33rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dollarColor {
	color: #7d00ff;
	font-size: 30rpx;
}
.price {
	font-size: 38rpx;
}
.butFn {
	display: flex;
	justify-content: center;
	align-items: center;
	.share {
		background-color: transparent;
		margin: 0 20rpx;
		padding: 0;
		&::after {
			border: none;
		}
	}
	.getUserInfo {
		background-color: transparent;
		margin: 0 10rpx;
		padding: 0;
		&::after {
			border: none;
		}
	}
}
.goodsNmae {
	padding: 0 36rpx 0 33rpx;
	width: 681rpx;
	height: 84rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: #434343;
	font-size: 30rpx;
	margin-bottom: 48rpx;
}
// <!-- 图文详情 -->
.goodsText {
	display: flex;
	justify-content: center;
	align-content: center;
	font-size: 28rpx;
	color: #434343;
	margin-top: 38rpx;
}
.goodsIntroduce {
	width: 717rpx;
	margin: 20rpx 16rpx 0 17rpx;
}
// 底部功能按钮

.footFn {
	position: fixed;
	display: flex;
	justify-content: space-between;
	bottom: 0;
	left: 0;
	width: 750rpx;
	height: 94rpx;
	border: 1rpx solid #dedede;
	background-color: #fff;
	padding: 0 30rpx 0 62rpx;
	box-sizing: border-box;
	// 客服按钮
	.btn-contact {
		background-color: transparent;
		margin: 0;
		margin-top: 15rpx;
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 70rpx;
		i {
			font-size: 35rpx;
			height: 33rpx;
			width: 35rpx;
			margin-bottom: 20rpx;
		}
		text {
			font-size: 20rpx;
			color: #434343;
		}
	}
	// 购物车按钮
	.btn-car {
		margin: 0;
		margin-top: 15rpx;
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 70rpx;
		i {
			font-size: 35rpx;
			height: 33rpx;
			width: 35rpx;
			margin-bottom: 20rpx;
		}
		text {
			font-size: 20rpx;
			color: #434343;
		}
	}
}
// 加入购物车
.addCar {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 196rpx;
	height: 60rpx;
	background-color: #fcaa23;
	border-radius: 30rpx;
	color: #fff;
	font-size: 26rpx;
	margin-top: 17rpx;
}
// 立即购买
.newBuy {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 196rpx;
	height: 60rpx;
	background-color: #7d00ff;
	border-radius: 30rpx;
	color: #fff;
	font-size: 26rpx;
	margin-top: 17rpx;
}
.stareD {
	font-size: 50rpx;
	color: #ffd103;
}
</style>
